<!--  -->
<template>
  <el-dialog
    v-model="showEdUser"
    title="分配角色"
    :before-close="() => cancel()"
  >
    <el-form :model="form">
      <el-form-item label="账号：" :label-width="formLabelWidth">
        <el-input
          v-model="form.username"
          autocomplete="off"
          placeholder="请输入账号"
        />
      </el-form-item>
      <el-form-item label="姓名：" :label-width="formLabelWidth">
        <el-input
          v-model="form.nickName"
          autocomplete="off"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="邮箱：" :label-width="formLabelWidth">
        <el-input
          v-model="form.email"
          autocomplete="off"
          placeholder="请输入邮箱"
        />
      </el-form-item>
      <el-form-item label="密码：" :label-width="formLabelWidth">
        <el-input
          v-model="form.password"
          autocomplete="off"
          show-password
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item label="备注：" :label-width="formLabelWidth">
        <el-input
          :rows="2"
          type="textarea"
          v-model="form.note"
          placeholder="请输入备注"
        />
      </el-form-item>

      <el-form-item label="是否启用：" :label-width="formLabelWidth">
        <el-radio-group v-model="form.status" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="updateAdminInfo">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, watch, Ref } from "vue";
import * as http from "../../../request/http";

const radio1 = ref("1");
const formLabelWidth = "140px";
const form = ref({}) as Ref<AdminDataObj>;

// 父组件传值
let props = defineProps<{
  showEdUser: boolean;
  adminData: AdminDataObj;
}>();

watch(
  () => props.showEdUser,
  (newVal, oldVal) => {
    if (newVal) {
      // 浅拷贝解构实现深拷贝  对象里面没有引用数据
      form.value = { ...props.adminData };
    }
  }
);

// 子传父
// emit 声明
let emit = defineEmits<{
  (event: "hidden", flag?: string): void;
}>();
function cancel(flag?: string) {
  // 子传父
  emit("hidden", flag);
}

// 点击确定  更新数据
async function updateAdminInfo() {
  let res = await http.updateAdmin(props.adminData.id, form.value);
  if (res.code === 200) {
    // 请求成功   关闭弹框 更新数据
    cancel("reloadTable");
  }
}
</script>
<style lang="less" scoped></style>
